<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <title>chat</title>
    <link rel="stylesheet" href="css/materialize.min.css">
    <link href="css/icon.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/ripple.css">
    <link rel="stylesheet" type="text/css" href="css/emoji-popup.css">
    <link rel="stylesheet" type="text/css" href="css/mail.css">
    <link rel="stylesheet" type="text/css" href="css/video.css">
    <link rel="stylesheet" type="text/css" href="css/spinner.css">
    <link rel="stylesheet" type="text/css" href="css/github.css">
    <link rel="shortcut icon" href="img/mola.png" />
</head>

<body>

    <div class="demo" style='opacity: 0;'>

        <svg class="sidebar" viewBox="0 0 300 520">
            <path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,520 L0,520"></path>
        </svg>

        <div class="static">
            <div class="static__text">拉这个白条</div>
        </div>

        <div id="sidebar" class="sidebar-content">
            <div class="friend-list">
                <div class="empty" style="display:block">
                    <h2 style="color: #787b81ab;">empty</h2>
                </div>
            </div>
            <div class="search">
                <input type="text" class="search__input" placeholder="Search">
            </div>
        </div>
        <div class="chat">
            <span class="chat__back"></span>

            <div class="chat__person">
                <span class="chat__online active"></span>
                <span class="chat__name">Huehue Huehue</span>
            </div>
            <span class="chat__status">signature</span>
            <div class="chat__messages">
            </div>
            <div class="mini-tool">
                <div class="tool-item" id="tool-file"><i class="material-icons" style="font-size: 18px;">file_copy</i></div>
                <div class="tool-item" id="tool-video"><i class="material-icons" style="font-size: 18px;">videocam</i></div>
                <div class="tool-item" id="tool-emoji" onclick="emojiFunc()"><i class="material-icons" style="font-size: 18px;">insert_emoticon</i></div>
                <div class="tool-item" id="tool-account"><i class="material-icons" style="font-size: 18px;">account_box</i></div>
                <div class="tool-item" id="tool-contacts"><i class="material-icons" style="font-size: 18px;">contacts</i></div>
            </div>
            <div class="chat-container">
                <input type="text" class="chat__input" placeholder="Your message">
                <button class="send ripple-effect">Send</button>
            </div>
            <!--图片放大 holder -->
            <img  class="imgFile materialboxed" id="imgHolder" style="display: none">
        </div>
    </div>
    <div class='user_info' style='display: none'>
        <ul class="collapsible popout" data-collapsible="accordion">
            <li>
                <div class="collapsible-header"><i class="material-icons">loyalty</i>名片</div>
                <div class="collapsible-body">
                    <div class="profile">
                        <a href="javascript:;" class="tooltipped" data-position="right" data-delay="50"
                            data-tooltip="点击更改头像"><img src="img/mola.png" class="gravatar" alt=""></a>
                    </div>
                    <div class="chatter_name">
                        <p style="padding-bottom: 1rem;font-size: 16px;text-align: center;">
                            <i class="material-icons" style="font-size: 16px;color: #716060;">account_box</i>
                            &nbsp;&nbsp;&nbsp;&nbsp;翻车鱼
                            <i class="material-icons" style="font-size: 16px;color: #716060;">create</i>
                        </p>
                    </div>
                    <div class="sign">
                        <p style="padding-bottom: 2rem;padding-left: 1.4rem;color: #5f5858; text-align: center;">
                            <i class="material-icons" style="font-size: 14px;color: #716060;">create</i>
                            点击修改签名
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    <!-- <a class="btn-floating waves-effect waves-light btn-large blue" style="position: fixed;
    bottom: 4rem;
    right: 2rem;" href="javascript:;"><i class="material-icons">keyboard_arrow_left</i></a>

    <a class="btn-floating waves-effect waves-light btn-large gray" style="position: fixed;
bottom: 12rem;
right: 2rem;" href="javascript:;"><i class="material-icons">account_box</i></a> -->
    <div class="fixed-action-btn" id="menu" style='opacity: 0;'>
        <a class="btn-floating waves-effect waves-light btn-large blue">
            <i class="large material-icons" id="menu-icon">menu</i>
        </a>
        <ul>
            <!-- 视频 -->
            <li><a class="btn-floating waves-effect waves-light blue darken-1 tooltipped" html="true"
                    data-position="left" data-delay="50" data-tooltip="视频聊天" id="video"><i
                        class="material-icons">videocam</i></a></li>
            <!-- emoji -->
            <li><a class="btn-floating waves-effect waves-light red tooltipped" data-position="left" data-delay="50"
                    data-tooltip="插入emoji" id="insert_emoticon"
                    href="javascript:emojiFunc()"><i
                        class="material-icons">insert_emoticon</i></a></li>
            <!-- 群聊 -->
            <li><a class="btn-floating waves-effect waves-light purple lighten-1 tooltipped" html="true"
                    data-position="left" data-delay="50" data-tooltip="公共区域" id="multichat"><i
                        class="material-icons">supervisor_account</i></a></li>
            <!-- 文件 -->
            <li><a class="btn-floating waves-effect waves-light green tooltipped" data-position="left" data-delay="50"
                    data-tooltip="文件传输" id="file_copy"><i class="material-icons">file_copy</i></a></li>
            <!-- 关闭窗口 -->
            <li><a class="btn-floating waves-effect waves-light blue darken-1 tooltipped" data-position="left"
                    data-delay="50" data-tooltip="关闭窗口" id="keyboard_arrow_left"><i
                        class="material-icons">keyboard_arrow_left</i></a></li>
            <!-- 名片 -->
            <li><a class="btn-floating waves-effect waves-light gray tooltipped" id="account_box" data-position="left"
                    data-delay="50" data-tooltip="个人名片"><i class="material-icons">account_box</i></a></li>

        </ul>
    </div>
    <div class="container" style="display: none">
        <div class="folder">
            <div class="paper">
                <h1 style="font-size: 11px;margin: 3 2;">欢迎来到mola的聊天室</h1>
                <p style="font-size: 11px;margin: 2 2;">在这里，每一个人都是陌生人。在这里，每一个人又都是友人。</p>
                <p style="font-size: 11px;margin: 2 2;">
                    我们来到这个世界上，没有预知，纯属偶然。就像我们遇到一个陌生人一样，不会提前安排好，不会设想。所以，我们是否与他或者她，成为朋友，还是情人，恋人，然后，产生出种种纠结，或悲或喜，或者成为生死之交，或者割袍断义，永不联系。或者与她从如胶似漆，转眼各奔东西。
                </p>
                <p style="font-size: 11px;margin: 2 2;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="cover">
                <div class="title">by mola</div>
            </div>
        </div>
    </div>
    <input type="file" id="file-input" name="fileContent" style="display: none">
    <!-- 摄像头模态 -->
    <div id="video-modal" class="modal bottom-sheet">
        <a id="video-off" class="btn-floating btn-large waves-effect waves-light red"><i
                class="material-icons">videocam_off</i></a>
        <a id="style-choose" class="dropdown-button btn-floating btn-medium waves-effect waves-light blue" data-activates='dropdown_choose' constrainwidth='false'><i
                class="material-icons Medium">toc</i></a>
        <ul id='dropdown_choose' class='dropdown-content'>
            <li id="choose_camera"><a style="font-size: 13px;">前置摄像头</a></li>
            <li class="divider"></li>
            <li id="choose_screen"><a style="font-size: 13px;">屏幕共享</a></li>   
            </ul>
        <a id="open-mirror" class="btn-floating btn-medium waves-effect waves-light green tooltipped"
            data-position="left" data-delay="50" data-tooltip="隐藏画中画"><i
                class="material-icons Medium">picture_in_picture</i></a>
        <div class="video-root">
            <video id="videoOther" class="rotateVideo" width="100%" height="100%" autoplay=""></video>
            <video id="videoSelf" class="rotateVideo" width="35%" autoplay="" muted="true"></video>
        </div>
    </div>
    <a id="back-to-video" class="btn-floating btn-medium waves-effect waves-light green tooltipped"
        data-position="right" data-delay="50" data-tooltip="返回通话"><i class="material-icons Medium">videocam</i></a>
    <a id="cancel-request" class="btn-floating btn-medium waves-effect waves-light red tooltipped" data-position="right"
        data-delay="50" data-tooltip="取消请求"><i class="material-icons Medium">videocam_off</i></a>

    <!--侧边导航  -->
    <ul id="slide-out" class="side-nav">
        <li>
            <div class="userView">
                <div class="background">
                    <img src="img/abs.jpg">
                </div>
                <a href="javascript:;"><img id="nav-img" class="circle" src="img/header/4.jpeg"></a>
                <a href="javascript:;"><span id="nav-name" class="white-text name">molamola</span></a>
                <a href="javascript:;"><span id="nav-sign" class="white-text email">菜单栏开发中。。。</span></a>
            </div>
        </li>
        <li><a class="subheader">星系</a></li>
        <li><a class="waves-effect" >发现更多plant</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">星球</a></li>
        <li><a class="waves-effect" >音乐盒子</a></li>
        <li><a class="waves-effect" >备忘录</a></li>
        <li><a class="waves-effect" >星球管理</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">其他</a></li>
        <li><a class="waves-effect" >设置</a></li>
        <li><a class="waves-effect" >关于</a></li>
    </ul>
    <a href="javascript:;" data-activates="slide-out" class="button-collapse"><i class="material-icons" style="
        font-size: 30;
        color: #d1d2d2;
    ">menu</i></a>

    <!--github-->
    <a href="https://github.com/molamolaxxx/molachat" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">
        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#8abce0 !important; color:#fff !important; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
        </svg>
    </a>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/utils/stopExecutionOnTimeout.js?t=1"></script>
    <script type="text/javascript" src="js/utils/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/app/version.js"></script>
    <script type="text/javascript" src="js/app/setting.js"></script>
    <script type="text/javascript" src="js/utils/smoothscroll.js"></script>
    <script type="text/javascript" src="js/utils/sweetalert.min.js"></script>
    <script type="text/javascript" src="js/app/permissions.js"></script>
    <script type="text/javascript" src="js/emoji/twemoji.min.js"></script>
    <script type="text/javascript" src="js/emoji/emoji-popup.js"></script>
    <script type="text/javascript" src="js/chat/common.js"></script>
    <script type="text/javascript" src="js/app/main.js"></script>
    <script type="text/javascript" src="js/chat/user.js"></script>
    <script type="text/javascript" src="js/chat/chatter.js"></script>
    <script type="text/javascript" src="js/chat/session.js"></script>
    <script type="text/javascript" src="js/chat/message.js"></script>
    <script type="text/javascript" src="js/file/file.js"></script>
    <script type="text/javascript" src="js/utils/ripple.js"></script>
    <script type="text/javascript" src="js/app/mail.js"></script>
    <script type="text/javascript" src="js/chat/multichat.js"></script>
    <script type="text/javascript" src="js/video/rtc.js"></script>
    <script type="text/javascript" src="js/video/video.js"></script>
    <script type="text/javascript" src="js/video/handler.js"></script>
    <script type="text/javascript" src="js/app/nav.js"></script>
    <script src="js/utils/materialize.min.js"></script>

</body>

</html>
